<template>
  <div class="main-body">
    <div class="main">
      <el-form :label-position="'left'" label-width="80px" :model="formLabelAlign">
        <el-form-item label="名称">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-input v-model="formLabelAlign.region"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          <el-button @click="resetForm('ruleForm')">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      }
    }
  },
  created() {
  },
  methods: {
    init() {
    }
  }
}
</script>

<style scoped>
.main-body{
  width: 100vw;
  height:100vh;
  background: url('../assets/img/bg.jpeg') no-repeat center center;
  background-size: cover;
}
.main{
  width: 700px;
  height:360px;
  border-radius: 10px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: rgb(0 0 0 / 30%) 2px 8px 8px;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.4) rgba(40, 40, 40, 0.35) rgba(40, 40, 40, 0.35) rgba(255, 255, 255, 0.4);
  border-image: initial;
  padding: 80px 100px 0;
  box-sizing: border-box;
}
.button{
  width: 350px;
  height:60px;
  line-height: 60px;
}
input[type="submit"]{
  width: 300px;
  height:36px;
  color:#fff;
  cursor: pointer;
  background-color: rgba(0,0,0,0.3);
  outline: none;
  border:none;
  box-sizing: border-box;
  border-radius: 4px;
}
</style>
